<template>
  <div class="" @click="handleClick(item)">
      <mu-flexbox class="doctor-wrap">
        <mu-flexbox-item :grow="2">
          <img class="doctor-img" :alt="item.doctorName" v-lazy="item.doctorImage"/>
        </mu-flexbox-item>
        <mu-flexbox-item :grow="8" class="doctor-content">
          <h2 class="doctor-name">
            {{item.doctorName || item.regDeptName}}
            <span class="doctor-level">{{item.doctorLevel || '暂无'}}</span>
            <!-- <span class="dept-name"> {{item.deptName || '暂无'}}</span> -->
          </h2>
          <p class="doctor-desc" style="doctorDescStyle">
            <span class="export">擅长：</span> {{item.doctorGoodAt || '暂无'}}
          </p>
          <div class="btn-wrapper">
            <mu-raised-button primary @click="appointClick">有号</mu-raised-button>
            <!-- <mu-raised-button primary v-if="item.sourceState === 1" @click="appointClick">有号</mu-raised-button> -->
            <!-- <mu-raised-button default v-else-if="item.sourceState === 2" disabled>约满</mu-raised-button> -->
            <!-- <mu-raised-button default v-else disabled>停诊</mu-raised-button> -->
          </div>
        </mu-flexbox-item>
      </mu-flexbox>
      <mu-divider></mu-divider>

        <!--  dialog -->
        <mu-dialog :open="dialog" @close="close" dialogClass="appoint-dialog" scrollable>
          <div class="dialog-header">
            <h3>请选择预约时段</h3>
            <div class="tabs">
              <span class="active">上午</span>
              <span>下午</span>
            </div>
          </div>
          <div class="dialog-main">
            <mu-row class="text-center">
              <mu-col width="50" >
                科室：心内科
               </mu-col>
              <mu-col width="50" >
                诊查费：￥20
               </mu-col>
            </mu-row>
            <select-time :times="times"></select-time>
          </div>
          <div slot="actions" class="dialog-close" @click="close">x</div>
        </mu-dialog>
  </div>
</template>

<script>
import {commonAjax} from '@/api/api'
import SelectTime from '@/components/SelectTime'
export default {
  name: 'doctor-item',
  props: ['item', 'flag'],
  data () {
    return {
      doctorDescStyle: {},
      dept: JSON.parse(localStorage.dept || '{}'),
      dialog: false,
      times: []
    }
  },
  methods: {
    handleTabChange () {
    },
    handleClick (doctor) {
      // localStorage.doctor = JSON.stringify(doctor)
      // this.$router.push('/appointment/doctor-info')
    },
    appointClick (item) {
      if (this.flag) {
        // 获取时间段
        localStorage.doctor = JSON.stringify(item)
        this.getListdNumber(item)
      } else {
        this.handleClick(item)
      }
    },
    getListdNumber (item) {
      let params = {
        // departmentCode: item.departmentCode,
        // doctorCode: item.doctorCode,
        // schedulingDate: localStorage.currentDay,
        // doctorType: item.doctorType,
        // timeFlag: 1,
        // outpatientTpye: 1
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('appointment/listNumber', params, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1 && res.data.data.length > 0) {
          this.dialog = true
          this.times = res.data.data
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: '暂无号源'
          })
        }
      }).catch(() => {
        this.$store.commit('UPDATE_LOADING')
      })
    },
    close () {
      this.dialog = false
    }
  },
  components: { SelectTime }
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.doctor-wrap {
  padding: .8em 0;
  position: relative;
  .doctor-img {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-left:.3em;
  }
  .doctor-content {
    padding:0 10px;
  }
  .btn-wrapper {
    position: absolute;
    right: 1em;
    top: 1em;
    .mu-raised-button {
      height: 30px;
      line-height: 30px;
      min-width: 66px;
    }
  }
  .doctor-name {
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
    .doctor-level {
      font-size: 0.8em;
      padding:0 .6em;
      color: #999;
    }
    .dept-name {
      color: @color-primary;
      border: 1px solid @color-primary;
      padding: 1px;
      border-radius: 10px;
      font-size: .8em;
    }
  }
  .doctor-job{
    margin-top: 8px;
    font-size: .9em;
  }
  .doctor-desc {
    margin-top: 10px;
    color: #666;
    height: 2.8em;
    overflow: hidden;
    .export {
      color: @color-primary;
    }
  }
}
</style>
